<template>
  <div class="login">
    <van-form @submit="onSubmit" style="margin-top:20px">
  <van-field
    v-model="username"
    name="username"
    label="用户名"
    placeholder="用户名"
    :rules="[{ required: true, message: '请填写用户名' }]"
  />
  <van-field
    v-model="password"
    type="password"
    name="password"
    label="密码"
    placeholder="密码"
    :rules="[{ required: true, message: '请填写密码' }]"
  />
  <div style="margin: 16px;">
    <van-button round block type="info" native-type="submit">
      登录
    </van-button>
  </div>
</van-form>
 <div class="register">
      <a>忘记密码?</a>
     <van-button class="registerBtn" type="primary"
     to="/register"
     >没有账号?点击注册</van-button>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Form, Field, Button, Dialog, Toast } from 'vant'
import { getLogin } from '@/API/login'

Vue.use(Form)
Vue.use(Field)
Vue.use(Button)
Vue.use(Dialog)
Vue.use(Toast)
export default {
  name: 'login-index',
  data () {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    onSubmit (values) {
      // console.log(values)
      getLogin(values).then(res => {
        if (res.meta.code === 200) {
          localStorage.setItem('token', res.body.token)
          localStorage.setItem('user', JSON.stringify({ username: res.body.user, nickname: res.body.nickname, userImg: res.body.userImg }))
          Toast.success('登录成功！')
          setTimeout(() => {
            this.$router.push('/mine')
          }, 1000)
        }
      }).catch(res => {
        Toast.fail('登录失败:' + res.meta.msg)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.register{
  padding: 10px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 27px;
  a{
    color: blue;
  }
  .registerBtn{
    border-radius: 20px;
  }
}
</style>
